<template>
	<div class="cloudMain">
		<div class="searchBox" style="padding-bottom: 40px;">
			<el-card class="box-card" style="width: 480px;">
				<el-input placeholder="查询疾病名" v-model="input">
					<el-button slot="append" icon="el-icon-search" @click="searchDisease()"></el-button>
				</el-input>
			</el-card>
		</div>
		
		<el-card style="width: 850px; height: 650px;">
			<div id="main" class="cloudcharts" ref="wordCloudChart" style="width: 800px; height: 600px" />			
		</el-card>
	</div>
</template>

<script>
	import "echarts-wordcloud/dist/echarts-wordcloud";
	import "echarts-wordcloud/dist/echarts-wordcloud.min";
	var echarts = require('echarts');
	export default {
		created() {
			this.cloudInit();
			// this.getDiseaseList();
		},
		data() {
			return {
				diseaseName: "苯中毒",
				input: '',
				words: [],
				option: '',
				myChart: ''
			}
		},
		mounted() {
			document.title = "词云展示"
		},
		methods: {
			cloudInit() {
				const _this = this;
				var params = new URLSearchParams();
				params.append('name', _this.diseaseName);
				this.$http.post('/disease/getCloudByName', params).then(function(resp) {
					const wordmap = resp.data.data;
					const words = [];
					for (let i = 0; i < wordmap.length; i++) {
						const wordsArray = wordmap[i].split("-*-");
						words.push({
							name: wordsArray[0],
							value: wordsArray[1]
						});
					}
					const option = {
						series: [{
							type: 'wordCloud',
							// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
							shape: 'circle',
							// 这个功能还没用过
							keepAspect: false,
							// 这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
							// maskImage: maskImage,
							// 下面就是位置的配置
							left: 'center',
							top: 'center',
							width: '70%',
							height: '80%',
							right: null,
							bottom: null,
							// 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
							sizeRange: [18, 68],
							// 每个词旋转的角度范围和旋转的步进
							rotationRange: [-90, 90],
							rotationStep: 45,
							// 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
							gridSize: 10,
							// 允许词太大的时候，超出画布的范围
							drawOutOfBound: false,
							// 布局的时候是否有动画
							layoutAnimation: true,
							// 这是全局的文字样式，相对应的还可以对每个词设置字体样式
							textStyle: {
								fontFamily: 'sans-serif',
								fontWeight: 'bold',
								// 颜色可以用一个函数来返回字符串，这里是随机色
								color: function() {
									// Random color
									return 'rgb(' + [
										Math.round(Math.random() * 160),
										Math.round(Math.random() * 160),
										Math.round(Math.random() * 160)
									].join(',') + ')';
								}
							},
							emphasis: {
								focus: 'self',
								textStyle: {
									textShadowBlur: 10,
									textShadowColor: '#333'
								}
							},
							// 数据必须是一个数组，数组是对象，对象必须有name和value属性
							data: words
						}]
					}
					_this.option = option;
					_this.showCloud();
				})
			},
			showCloud() {
				const graphShow = document.getElementById('main');
				this.myChart = echarts.init(graphShow, 'light');
				this.myChart.setOption(this.option);
			},
			searchDisease() {
				const _this = this;
				var params = new URLSearchParams();
				params.append('name', _this.input);
				this.$http.post('/disease/getByName', params).then(function(resp) {
					const newDisease = resp.data.data;
					if (newDisease == null) {
						_this.input = '';
						_this.$message.error({message:'未搜索到该疾病!',duration:500});
					} else {
						_this.input = '';
						_this.myChart.clear();
						_this.myChart.dispose();
						_this.diseaseName = newDisease.name;
						_this.cloudInit();
					}
				})
			}
		}
	}
</script>

<style>
	.cloudMain {
		display: flex;
		flex-direction: column;
		align-content: space-around;
		flex-wrap: wrap;
	}

	.searchBox {
		display: flex;
		flex-direction: column;
		align-content: space-around;
		flex-wrap: wrap;
	}

	.cloudcharts {
		/* border: 2px solid #62c592; */
		border-radius: 10px;
	}
</style>
